<template>
    <view class="content">
        <view class="content2">
            <!-- 内嵌 -->
            <zhuo-Tooltip-Text :content="text2" theme="dark" :font-size="14">
                <button>点击或长按显示 Tooltip</button>
            </zhuo-Tooltip-Text>

            <view style="margin: 100px 0 0 0">
                项目描述
                <zhuo-Tooltip-Text :content="text2" theme="white" :font-size="14" content-style="color: red;">
                    <span style="color: blue">小丑：</span>
                </zhuo-Tooltip-Text>
                小丑竟然是你
                <zhuo-Tooltip-Text :content="text2" theme="dark" :font-size="14">小帅:</zhuo-Tooltip-Text>
                小帅是你
            </view>
        </view>
    </view>
</template>

<script setup>
const text =
    '四年春，齐侯以诸侯之师侵蔡，蔡溃，遂伐楚。楚子使与师言曰：“君处北海，寡人处南海，唯是风马牛不相及也。不虞君之涉吾地也，何故？”管仲对曰：“昔召康公命我先君大公曰：‘五侯九伯，女实征之，以夹辅周室。’赐我先君履：东至于海，西至于河，南至于穆陵，北至于无棣。尔贡包茅不入，王祭不共，无以缩酒，寡人是徵；昭王南征而不复，寡人是问。”对曰：“贡之不入，寡君之罪也，敢不共给？昭王之不复，君其问诸水滨。';
const text2 = '这是一个自动适配的提示框，内容可以很多也能适配屏幕！';
</script>

<style>
.content2 {
    position: absolute;
    left: 100rpx;
    top: 200rpx;
}
</style>
